{% extends "myapp/hat.html" %}


{% block content%}
<div id="graph">
</div>
<div role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <ul class="nav navbar-nav">
                    <li>
                        <form role="search" class="navbar-form" id="search">
                            <div class="form-group">
                                <input type="text" value="" placeholder="Search for Work Name" class="form-control" name="search">
                            </div>
                            <button class="btn btn-default" type="submit">Search</button>
                        </form>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>

    <div class="row">
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">Search Results</div>
            <table id="results" class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Work</th>
                    <th>ID</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-7">
        <div class="panel panel-default">
            <div class="panel-heading" id="name">Details</div>
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <img src="" class="well" id="poster"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <h4>Crew</h4>
                    <ul id="crew">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>



<style type="text/css">
    .node { stroke: #222; stroke-width: 1.5px; }
    .node.work { fill: #888; }
    .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style>


<script type="text/javascript">
    $(function () {
        function showWork(id) {
        console.log(id)
            $.get("/work/" + encodeURIComponent(id),

                    function (data) {
                        if (!data) return;
                        $("#id").text(data.id);



                    }, "json");
            return false;
        }

    function search() {
                const query=$("#search").find("input[name=search]").val();
                console.log(query)
                $.get("/search?q=" + encodeURIComponent(query),
                        function (data) {
                            const t = $("table#results tbody").empty();
                            if (!data || data.length === 0) return;
                            data.forEach(function (work) {
                                $("<tr><td class='work'>" + work.name + "</td><td>" + work.id + "</td><td>").appendTo(t)
                                        .click(function() { showWork($(this).find("td.work").text());})
                            });
                            console.log(data[0])
                            showWork(data[0].id);
                        }, "json");
                return false;
            }

        $("#search").submit(search);
        search();






    })






        </script>
<script type="text/javascript">
        const width = 800, height = 800;

        const force = d3.layout.force()
                .charge(-200).linkDistance(30).size([width, height]);

        const svg = d3.select("#graph").append("svg")
                .attr("width", "100%").attr("height", "100%")
                .attr("pointer-events", "all")
                .attr("id", "svg");

        d3.json("/graph_info", function(error, graph) {
            if (error) return;

            force.nodes(graph.nodes).links(graph.links).start();

            const link = svg.selectAll(".link")
                    .data(graph.links).enter()
                    .append("line").attr("class", "link");

            const node = svg.selectAll(".node")
                    .data(graph.nodes).enter()
                    .append("circle")
                    .attr("r", 20)
                    .call(force.drag);

            // html name attribute
            node.text(function (d) { return d.name })
            node.attr("title", function (d) { return d.name })
            // force feed algo ticks
            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                        .attr("y1", function(d) { return d.source.y; })
                        .attr("x2", function(d) { return d.target.x; })
                        .attr("y2", function(d) { return d.target.y; });

                node.attr("cx", function(d) { return d.x; })
                        .attr("cy", function(d) { return d.y; });
            });

            force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
        });
        });
</script>



{% endblock content %}
